<template>
    <div id="Coupon">

        <el-container>

            <!--  页头 -->
            <el-header>
                <span style="background-color: rgb(26, 188, 156)">&nbsp;</span> <span>优惠券列表</span>

                <div class="h-but">
                    <el-button @click="Refresh" size="small" ><i class="el-icon-refresh"></i> 刷新</el-button>
                    <el-button @click="back" size="small" ><i class="el-icon-arrow-left"></i> 返回</el-button>
                </div>
            </el-header>
            <!-- 搜索区 -->
            <el-main  style="background-color: #FFFFFF">
                    <div style="text-indent: 5px;background-color: #F3F3F3">
                        <i class="el-icon-search"></i> 筛选查询

                        <el-button style="float: right;margin-top: 1%;margin-right: 15px" size="small" @click="senior = true"><i class="el-icon-arrow-left"></i> 高级检索</el-button>
                    </div>
                    <!--      高级筛选          -->
                    <div class="m-div m-btn" >
                        <el-dialog title="高级筛选" :visible.sync="senior" label-width="88px">
                            <el-form ref="form" :model="seniorData" label-width="88px">

                                <el-form-item label="优惠券名称">
                                    <el-input class="setLen" v-model="seniorData.name"></el-input>
                                </el-form-item>

                             <el-form-item label="发放方式">
                                <el-select style="width: 200px" v-model="seniorData.grant" placeholder="全部">
                                    <el-option label="自动" value="2">自动</el-option>
                                    <el-option label="活动领取" value="3">活动领取</el-option>
                                    <el-option label="自动发放" value="4">自动发放</el-option>
                                  <el-option label="自动" value="5">无限制</el-option>
                                </el-select>
                              </el-form-item>

                                <el-form-item label="开始时间 ">
                                    <el-col :span="18">
                                        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="seniorData.stateDate" style="width: 210px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>

                                <el-form-item label="结束时间">
                                    <el-col :span="18">
                                        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="seniorData.EndDate" style="width: 200px;"></el-date-picker>
                                    </el-col>
                                </el-form-item>

                                <el-form-item style="position: relative;top: -34px;" label="优惠券状态">
                                    <el-select style="width: 210px"  v-model="seniorData.online" placeholder="上线/下线">
                                        <el-option label="上线" value="2">上线</el-option>
                                        <el-option label="下线" value="3">下线</el-option>
                                    </el-select>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="senior = false">取 消</el-button>
                                <el-button type="primary" @click="determine()">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>

                <div style="background-color: #FFFFFF;">
                        <span style="margin-left: 80px">优惠券内容：</span><el-input v-model="cpName" size="medium " style="width: 180px" placeholder="优惠券名称"></el-input>

                        <span style="margin-left: 125px">发放方式：</span>
                        <el-select clearable size="medium" style="width: 180px" v-model="cpGrant" placeholder="全部">
                            <el-option
                                    v-for="item in selectData"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>

                        <span style="margin-left: 125px">优惠券状态：</span>
                            <el-select clearable size="medium" style="width: 180px" v-model="cpOnline" placeholder="上线/下线">
                                <el-option
                                        v-for="item in selectOnline"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>

                        <el-button style="margin-left: 105px" @click="Search" size="medium" ><i class="el-icon-search"></i> 查询</el-button>
                </div>
            </el-main>
            <!-- 表格数据区 -->
            <el-footer style="line-height: 60px;text-indent: 5px">
                <i class="el-icon-s-order"></i> 数据列表

                <div style="float: right;margin-right: 10px" class="f-div">
                    <router-link to="/AddCoupon"><el-button  size="small"><i class="el-icon-circle-plus"></i> 添加优惠券</el-button></router-link>
                </div>

                <el-table border :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
                    <el-table-column align="center" type="selection" width="55"></el-table-column>
                    <el-table-column align="center" prop="couponCode" label="编号"></el-table-column>
                    <el-table-column align="center" prop="couponName" label="优惠券名称"></el-table-column>
                    <el-table-column align="center" :filters="staDate" :filter-method="filterHandler" prop="startDate" label="开始时间"></el-table-column>
                    <el-table-column align="center" :filters="endDate" :filter-method="filterHandler" prop="endDate" label="结束时间"></el-table-column>
                    <el-table-column align="center" prop="online" label="上线/下线">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.online"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="changeStatus($event, scope.row, scope.$index)"
                                    :active-value="2"
                                    :inactive-value="3">
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="grant" label="发放方式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.grant == 2">自动</span>
                            <span v-if="scope.row.grant == 3">活动领取</span>
                            <span v-if="scope.row.grant == 4">人工发放</span>
                            <span v-if="scope.row.grant == 5">无限制</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" prop="issueQuantity" label="数量"></el-table-column>
                    <el-table-column align="center" prop="address" label="操作">
                        <template slot-scope="scope">
                            <el-button @click="dialogFormVisible = true" @click.native.prevent="showRow(scope.row)" type="text" size="small">
                                查看
                            </el-button>
                            <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="paging">
                    <el-pagination align='center'
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[1,5,8,12]"
                                   :page-size="pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableData.length">
                    </el-pagination>
                </div>

            </el-footer>

        </el-container>

        <!-- 查看的弹出层 -->
        <el-dialog title="优惠券详情" destroy-on-close :visible.sync="dialogFormVisible">
            <!-- 文本框 -->
            <el-form ref="form" :model="showTableData" label-width="88px">
                <el-form-item label="优惠券编号">
                    <el-input readonly v-model="showTableData.couponCode"></el-input>
                </el-form-item>

                <el-form-item label="优惠券名称">
                    <el-input readonly v-model="showTableData.couponName"></el-input>
                </el-form-item>

                <el-form-item label="开始时间">
                    <el-input readonly v-model="showTableData.startDate"></el-input>
                </el-form-item>

                <el-form-item label="结束时间">
                    <el-input readonly v-model="showTableData.endDate"></el-input>
                </el-form-item>

                <el-form-item label="优惠券状态">
                    <el-input readonly v-model="showTableData.online">

                    </el-input>
                </el-form-item>

                <el-form-item label="获取方式">
                    <el-input readonly v-model="showTableData.grant"></el-input>
                </el-form-item>

                <el-form-item label="优惠数量">
                    <el-input readonly v-model="showTableData.issueQuantity"></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
export default {
    inject: ['reload'],
    data(){
        return{
            tableData:[],
            showTableData:{},
            selectOnline: [],
            selectData:[],
            staDate:[],
            endDate:[],
            seniorData:{
                name:null,
                grant:null,
                online:null,
                stateDate:null,
                EndDate:null,
            },
            currentPage: 1, // 当前页码
            total: 0, // 总条数
            pageSize: 5, // 每页的数据条数
            dialogFormVisible: false,
            senior : false,
            cpGrant:null,
            cpName:null,
            cpOnline:null,
        }
    },
    created() {
        //发放方式下拉框选项
        this.selectData = [
        {
            value: '2',
            label: '自动'
        }, {
            value: '3',
            label: '活动领取'
        }, {
            value: '4',
            label: '人工发放'
        }, {
            value: '5',
            label: '无限制'
        }
        ]
        //状态下拉框数据

        this.selectOnline = [
            {
                value: '2',
                label: '上线'
            }, {
                value: '3',
                label: '不上线'
            }
        ]

        //请求表数据
        this.$http.get("/Coupon/tableData").then(res => {
            this.tableData = res.data
            this.total = res.data.length
        })
        //请求时间
        this.$http.get("/Coupon/getDate").then(res => {
            this.staDate = res.data.staDate
            this.endDate = res.data.endDate
        })
    },
    methods: {
        //高级检索：确定时执行
        determine(){
            this.currentPage = 1;
            this.senior = false
            this.$http.get("/Coupon/selTable",{params:this.seniorData}).then(res => {
                this.tableData = res.data

            })

        },
        //基本模糊查询
        Search(){
            this.currentPage = 1;
            this.$http.get("/Coupon/tableData",{params:{cpGrant:this.cpGrant,cpName:this.cpName,cpOnline:this.cpOnline}}).then(res => {
                this.tableData = res.data
                this.total = res.data.length
            })
        },
        //刷新按钮
        Refresh(){
            this.reload()
        },
        //返回按钮
        back(){
            this.$router.back()
        },
        //查看数据执行的函数
        showRow(row){
            this.showTableData = JSON.parse( JSON.stringify(row))
            if (row.grant == 2) {
                this.showTableData.grant = "自动"
            }else if (row.grant == 3) {
                this.showTableData.grant = "活动领取"
            }else if (row.grant == 4) {
                this.showTableData.grant = "人工发放"
            }else if (row.grant == 5) {
                this.showTableData.grant = "无限制"
            }
        },
        //删除数据执行的函数
        deleteRow(row){
            let url = "/Coupon/deleteCoupon";
            var data = new URLSearchParams()
            data.append('id', row.couponId);
            this.$http.post(url, data, {
                headers: {
                    'C':'application/x-www-form-urlencoded'
                }
            }).then(res => {
                let status = res.data.status;
                if (status == 200) {
                    this.$message(res.data.msg);
                    for (let i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].couponId == row.couponId) {
                            this.tableData.splice(i,1)
                        }
                    }
                }else {
                    this.$message(res.data.msg);
                }
            })

        },
        //状态改变时执行的函数
        changeStatus(e, row, index){
            let ol = row.online;
            let cid = row.couponId;

            this.$http.get("/Coupon/modifyOnline",{params:{modify:ol,id:cid}}).then(res => {
                console.log(res.data.status)
                if (res.data.status == 200) {
                    this.$message(res.data.msg);
                }else{
                    this.$message(res.data.msg);
                    if (e == 2){
                        setTimeout(()=>{
                            row.online = 1
                        },1000)

                    } else if(e == 1) {
                        setTimeout(()=>{
                            row.online = 2
                        },500)
                    }
                }
            })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        //表格数据，时间筛选
        filterHandler(value, row, column){
            const property = column['property'];
            return row[property] === value;
        }
    }
}
</script>

<style scoped>
    .s-btn{
        display: inline-block;
        float: left;
    }
    .el-header{
        background-color: #F3F3F3;
        line-height: 50px;
        padding: 0px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
    }
    .el-form-item{
        display: inline-block;
        margin-left: 50px;
        margin-top: 0px;
    }
    .el-main{
        background-color: #F3F3F3;
        padding: 0px;
        line-height: 62px;
        height: 130px;
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        margin-bottom: 20px;
     }
    .paging{
        background-color: #FFFFFF;
        line-height: 45px;
        height: 45px;
        padding-top: 12px;
    }
    .el-footer{
        font-family: 微软雅黑, sans-serif;
        color: rgb(153, 153, 153);
        padding: 0px;
    }
    .f-div{
        display: inline-block;
    }
    .m-btn{
        float: right;
        margin: auto;
    }
    .h-but{
        display: inline-block;
        float: right;
        margin-right: 16px;
    }
    .el-footer{
        background-color: #F3F3F3;
        padding: 0px;
    }
</style>
